<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryRef" :inline="true" :model="queryParams" :size="'large'" label-width="68px">
      <el-form-item label="日期:">
        <el-radio-group v-model="dayRadio">
          <el-radio-button label="1" @change="TodayData(0)">今天</el-radio-button>
          <el-radio-button label="2" @change="TodayData(-2)">近三天</el-radio-button>
          <el-radio-button label="3" @change="TodayData(-6)">近七天</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dateRange"
          :disabled-date="disabledDate"
          end-placeholder="结束日期"
          range-separator="-"
          start-placeholder="开始日期"
          type="datetimerange"
          value-format="YYYY-MM-DD HH:mm:ss"
          @focus="handleFocus"
          :clearable="false"
          @calendar-change="handleChange"
        />
      </el-form-item>

      <el-form-item>
        <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
        <!--        <el-button icon="Refresh" @click="resetQuery">重置</el-button>-->
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          v-hasPermi="['system:history:export']"-->
      <!--          icon="Download"-->
      <!--          plain-->
      <!--          type="warning"-->
      <!--          @click="handleExport">导出-->
      <!--        </el-button>-->
      <!--      </el-col>-->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row>
    <div class="merchant">
      <div class="merchant_1">
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">交易商户号</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(79, 201, 176)">
            {{ Balance.mrchntCode }}
          </div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">结算账户</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(123, 201, 249)">
            {{ Balance.settleAccount }}
          </div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">总余额</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(123, 201, 249)"> ￥ {{ Balance.allAmountDe }} </div>
        </div>
        <div class="merchant_2">
          <div class="merchant_3">结算户金额</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(79, 201, 176)"> ￥ {{ Balance.settleAmountDe }} </div>
        </div>

        <div class="merchant_2">
          <div class="merchant_3">余额户金额</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(79, 201, 176)"> ￥ {{ Balance.balanceAmountDe }} </div>
        </div>
      </div>
    </div>

    <el-table v-loading="loading" :data="historyList">
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="商户名称" prop="merName" width="180" />
      <el-table-column align="center" label="划付时间" prop="date" width="180" />
      <el-table-column align="center" label="出款申请时间" prop="reqDate" width="180" />
      <el-table-column align="center" label="入账金额" prop="amt">
        <template #default="scope">
          <p>
            <span style="color: #ff6600"> ￥{{ scope.row.amt }} </span>
          </p>
        </template>
      </el-table-column>

      <el-table-column align="center" label="出款状态" prop="staCd">
        <template #default="scope">
          <dict-tag :options="sta_cd" :value="scope.row.staCd" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="结算方式" prop="settleType">
        <template #default="scope">
          <dict-tag :options="settle_type" :value="scope.row.settleType" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="手续费" prop="feeAmt">
        <template #default="scope">
          <p>
            <span style="color: #ff6600"> ￥{{ scope.row.feeAmt }} </span>
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="出款通道" prop="channel" />
      <el-table-column align="center" label="入账账号" prop="cardNo" />
      <!--      <el-table-column label="响应消息" align="center" prop="respMsg"/>-->
    </el-table>

    <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageIndex" :total="total" @pagination="getList" />
  </div>
</template>

<script name="History" setup>
  import { dayjs } from 'element-plus';
  import { listHistory } from '@/api/laiqianle/history';
  import { query } from '@/api/laiqianle/mer';
  import { getCurrentInstance, reactive, ref, toRefs } from 'vue';
  import { TodayDataTimeUtils } from '@/utils/dateUtils';

  const { proxy } = getCurrentInstance();
  const props = defineProps({
    merlqianleid: {
      type: String,
      default: '',
    },
    merchantName: {
      type: String,
      default: '',
    },
  });

  const { sta_cd, settle_type } = proxy.useDict('sta_cd', 'settle_type');
  const historyList = ref([]);
  const Balance = ref({
    mrchntCode: 0,
    settleAccount: 0,
    allAmountDe: 0,
    settleAmountDe: 0,
    balanceAmountDe: 0,
  });
  const open = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const title = ref('');
  const dateRange = ref([dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'), dayjs(`${new Date()}`).format('YYYY-MM-DD HH:mm:ss')]);
  const pickerMinDate = ref(null);

  const today = reactive({
    oneDaya: null,
    twoDaya: null,
  });
  const dayRadio = ref(1);
  const data = reactive({
    form: {},
    queryParams: {
      merchantId: props.merlqianleid,
      startTime: '2023-5-23 00:00:00',
      endTime: '2023-6-19 00:00:00',
      pageIndex: 1,
      pageSize: 10,
      MerName: props.merchantName,
    },
    rules: {},
  });

  const { queryParams, form, rules } = toRefs(data);

  /** 查询来钱乐出款记录列表 */
  function getList() {
    queryParams.value.startTime = dateRange.value[0];
    queryParams.value.endTime = dateRange.value[1];
    loading.value = true;
    if (queryParams.value.merchantId == null || queryParams.value.merchantId === 'null') {
      loading.value = false;
      return false;
    }
    listHistory(queryParams.value).then((response) => {
      historyList.value = response.data.amts;
      total.value = response.data.amtCount;
      loading.value = false;
    });

    query(queryParams.value).then((response) => {
      Balance.value = response.data;
    });
  }

  // 取消按钮
  function cancel() {
    open.value = false;
    reset();
  }

  // 表单重置
  function reset() {
    form.value = {
      id: null,
      date: null,
      reqdate: null,
      amt: null,
      stacd: null,
      settletype: null,
      feeamt: null,
      respmsg: null,
      channel: null,
      cardno: null,
      orderid: null,
      acctname: null,
      bankno: null,
      stamode: null,
      updateBy: null,
      updateTime: null,
      delFlag: null,
      createBy: null,
      createTime: null,
    };
    proxy.resetForm('historyRef');
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }

  function TodayData(day) {
    // today.value = TodayDataTimeUtils(day);
    if (day === 0) {
      dayRadio.value = 1;
      dateRange.value = [dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')];
    } else if (day === -2) {
      dayRadio.value = 2;
      dateRange.value = [dayjs().subtract(3, 'day').startOf('date').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')];
    } else if (day === -6) {
      dayRadio.value = 3;
      dateRange.value = [dayjs().subtract(7, 'day').startOf('date').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')];
    }
    // queryParams.value.startTime = today.value.oneDaya;
    // queryParams.value.endTime = today.value.twoDaya;
    getList();
  }

  function handleChange(data) {
    console.log(data);
    const [pointDay] = data;
    pickerMinDate.value = pointDay;
  }

  //取值方法
  function handleFocus() {
    pickerMinDate.value = null;
  }

  function disabledDate(time) {
    if (!pickerMinDate.value) {
      return false;
    }
    let timeRange = 30;
    const con1 = new Date(pickerMinDate.value).getTime() - timeRange * 24 * 60 * 60 * 1000;
    const con2 = new Date(pickerMinDate.value).getTime() + timeRange * 24 * 60 * 60 * 1000;
    return time < con1 || time > con2;
  }

  TodayData(0);
</script>

<style lang="scss" scoped>
  .merchant {
    margin: 10px;

    .title {
      display: flex;
      align-items: center;
      padding-top: 16px;
      padding-left: 16px;

      .bar {
        width: 4px;
        height: 20px;
        background-color: #409eff;
        margin-right: 10px;
      }

      .text {
        font-size: 16px;
        color: #333;
      }
    }

    .merchant_1 {
      width: 100%;
      height: 110px;
      background: beige;
      border-bottom: 1px dashed #ddd;
      margin: 10px 0;
      border-top: 1px dashed #ddd;
      background: #fafafa;
      display: flex;

      .merchant_2 {
        flex: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        margin: 10px 0;
      }

      .merchant_3 {
        display: block;
        height: 30px;
        margin-bottom: 5px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #666;
      }
    }

    .demo-pagination-block {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }
  }
</style>
